<template>
  <div class="index" v-cloak>
    <!-- 导航 -->
    <el-row class="header acea-row row-center-wrapper">
      <el-col :span="5"></el-col>
      <!-- 新闻轮播 -->
      <el-col :span="5" class="news acea-row row-between-wrapper">
        <div class="pictrue"><img src="@assets/images/news.png" /></div>
        <div class="swiper-no-swiping new-banner">
          <swiper
            class="swiper-wrapper"
            :options="swiperRoll"
            v-if="roll.length > 0"
          >
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in roll"
              :key="index"
            >
              <router-link
                :to="item.wap_url ? item.wap_url : ''"
                class="acea-row row-between-wrapper"
              >
                <div class="text acea-row row-between-wrapper">
                  <div class="label" v-if="item.show === '是'">最新</div>
                  <div class="newsTitle line1">{{ item.info }}</div>
                </div>
              </router-link>
            </swiper-slide>
          </swiper>
        </div>
      </el-col>
      <el-col :span="4"> </el-col>
      <el-col :span="5" class="news acea-row row-right">
        <el-link type="info" class="title">登录/注册</el-link
        ><span class="split"></span>
        <el-link type="info" class="title">我的订单</el-link
        ><span class="split"></span>
        <el-link type="info" class="title">会员</el-link
        ><span class="split"></span>
      </el-col>

      <el-col :span="5"></el-col>
    </el-row>

    <!-- 搜索和图片 -->
    <el-row class="funcTabWrap" type="flex" justify="center">
      <el-col :span="5" style="height:120px;">
        <div class="logo">
          <img :src="logoUrl" />
        </div>
      </el-col>
      <el-col :span="9" class="acea-row row-left" style="height:120px;">
        <div class="search ">
          <div class="input acea-row row-between-wrapper">
            <span class="iconfont icon-sousuo2"></span>
            <form @submit.prevent="submit"></form>
            <input type="text" placeholder="点击搜索商品" v-model="search" />
            <div class="bnt" @click="submit">搜索</div>
          </div>
        </div>
        <el-link :underline="false" class="carWarp acea-row row-center ">
          <span
            class="iconfont icon-caigou-xianxing "
            style="font-size:18px;width:18px;color:#CC9756;"
          ></span>
          <span style="color:#CC9756;">购物车</span>
        </el-link>
      </el-col>
    </el-row>

    <!-- 首页分类 -->
    <el-row type="flex" justify="center">
      <el-col :span="18" style="height:35px;">
        <div class="classify">
          <ul>
            <li class="title">
              <router-link :to="'#'"
                ><span
                  style="border-bottom:4px   solid   #CC9756;color: #CC9756;"
                  >首页</span
                >
                <div class="show-warp"></div>
              </router-link>
            </li>
            <li
              class="item"
              v-for="(item, index) in info.fastList"
              :key="index"
            >
              <span>{{ item.cate_name }}</span>
              <div class="show-warp">
                {{ item.cate_name }}
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>

    <!-- 首页轮播图 -->
    <div class="slider-banner banner" style="height:420px;">
      <swiper :options="swiperOption" v-if="banner.length > 0">
        <swiper-slide v-for="(item, index) in banner" :key="index">
          <router-link
            :to="item.wap_url ? item.wap_url : ''"
            class="search acea-row row-middle"
          >
            <img :src="item.pic" style="width:100%;height:420px;" />
          </router-link>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 新品首发 -->
    <el-row class="newArruval" type="flex" justify="center">
      <el-col :span="18" style="height:55px;">
        <div class="newArruvalHead">
          <h3 class="name">新品首发</h3>
          <span class="frontName">为你寻觅世间好物</span>
          <div class="moreItems">
            <router-link :to="'/category'"
              >更多<span class="iconfont icon-jiantou"></span
            ></router-link>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="background-color: #F4F0EA;" type="flex" justify="center">
      <el-col :span="18" class="newArruvalBox">
        <div style="width:1090px;margin: 0  auto;">
          <el-col
            v-for="(item, index) in info.firstList"
            :key="index"
            class="newArruvalCard"
          >
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <router-link :to="{ path: '/detail/' + item.id }">
                <div style="width: 265px;height:265px;">
                  <img :src="item.image" style="width: 100%;;" />
                </div>
                <div style="height:79px;">
                  <div class="newArruvalFont">{{ item.store_name }}</div>
                  <div class="newArruvalPrice">￥{{ item.price }}</div>
                </div>
              </router-link>
            </el-card>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <!-- 精品推荐 -->
    <el-row class="boutiqueRecommendationTitle" type="flex" justify="center">
      <el-col :span="18" style="height:45px;">
        <div class="boutiqueRecommendationHead">
          <div>
            <h3 class="name">精品推荐</h3>
            <span class="frontName">{{ info.bastInfo }}</span>

            <div class="moreItems">
              <router-link :to="{ path: '/hot_new_goods/' + 1 }"
                >更多<span class="iconfont icon-jiantou"></span
              ></router-link>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row class="boutiqueRecommendationSwiper" type="flex" justify="center">
      <el-col :span="18">
        <div style="width:1090px;margin:0 auto">
          <div class="slider-banner banner" style="height:310px;">
            <swiper :options="swiperOption" v-if="banner.length > 0">
              <swiper-slide v-for="(item, index) in banner" :key="index">
                <router-link
                  :to="item.wap_url ? item.wap_url : ''"
                  class="search acea-row row-middle"
                >
                  <img :src="item.pic" style="width:100%;height:310px;" />
                </router-link>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="padding-top:20px;" type="flex" justify="center">
      <el-col :span="18" class="newArruvalBox">
        <div style="width:1090px;margin:0  auto;">
          <el-col
            v-for="(item, index) in info.bastList"
            :key="index"
            class="newArruvalCard"
          >
            <span style="width:25px;height:464px;"></span>
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <router-link :to="{ path: '/detail/' + item.id }">
                <div style="width: 253px;height:253px;">
                  <img :src="item.image" style="width: 100%;" />
                </div>
                <div style="height:79px;">
                  <div class="newArruvalFont">{{ item.store_name }}</div>
                  <div class="newArruvalPrice">￥{{ item.price }}</div>
                </div>
              </router-link>
            </el-card>
          </el-col>
        </div>
      </el-col>
    </el-row>

    <!-- 促销单品 -->
    <el-row class="promotionalItemsTitle" type="flex" justify="center">
      <el-col :span="18" style="height:45px;">
        <div class="boutiqueRecommendationHead">
          <div>
            <h3 class="name">福利社</h3>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="background-color:#F4F0EA;" type="flex" justify="center">
      <el-col :span="18" style="height:445px;">
        <div class="promotionalItemsBox acea-row">
          <div class="promotionalItemsSwiper">
            <div class="slider-banner banner" style="height:376px;">
              <swiper :options="swiperOption" v-if="banner.length > 0">
                <swiper-slide v-for="(item, index) in banner" :key="index">
                  <router-link
                    :to="item.wap_url ? item.wap_url : ''"
                    class="search acea-row row-middle"
                  >
                    <img :src="item.pic" style="width:100%;height:376px;" />
                  </router-link>
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <div class="promotionalItemsProduct" style="background-color:#fff;">
            <div class="promotionalItemsProductTitle">
              <h3 class="promotionalItemsProductTitleName">促销单品</h3>
              <span class="promotionalItemsProductTitleFrontName">{{
                info.salesInfo
              }}</span>
              <div class="moreItems">
                <router-link :to="'/promotion'"
                  >更多<span class="iconfont icon-jiantou"></span
                ></router-link>
              </div>
            </div>
            <div class="promotionalItemsProductList acea-row">
              <div
                class="promotionalItemsProductItems acea-row"
                v-for="(item, index) in benefit"
                :key="index"
              >
                <router-link :to="{ path: '/detail/' + item.id }">
                  <div class="image">
                    <img :src="item.image" />
                  </div>
                </router-link>

                <div class="font">
                  <div class="fontTitle">{{ item.store_name }}</div>
                  <div class="promotion">
                    促销价: ￥<span style="font-weight:700;font-size:15px;">{{
                      item.price
                    }}</span>
                  </div>
                  <div>
                    <div class="dailyPrice">￥{{ benefit[0].ot_price }}</div>
                  </div>
                  <router-link :to="{ path: '/detail/' + item.id }">
                    <div class="btn">立即抢购</div>
                  </router-link>
                </div>
              </div>

              <div
                class="promotionalItemsProductItems acea-row"
                v-for="(item, index) in benefit"
                :key="index"
              >
                <router-link :to="{ path: '/detail/' + item.id }">
                  <div class="image">
                    <img :src="item.image" />
                  </div>
                </router-link>

                <div class="font">
                  <div class="fontTitle">{{ item.store_name }}</div>
                  <div class="promotion">
                    促销价: ￥<span style="font-weight:700;font-size:15px;">{{
                      item.price
                    }}</span>
                  </div>
                  <div>
                    <div class="dailyPrice">￥{{ benefit[0].ot_price }}</div>
                  </div>
                  <router-link :to="{ path: '/detail/' + item.id }">
                    <div class="btn">立即抢购</div>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <div class="promotionalItemsHot" style="background-color:#fff;">
            <div class="title">
              <h3 class="promotionalItemsProductTitleName">热门榜单</h3>
              <div class="moreItems">
                <router-link :to="{ path: '/hot_new_goods/' + 2 }"
                  >更多<span class="iconfont icon-jiantou"></span
                ></router-link>
              </div>
            </div>
            <router-link
              :to="{ path: '/detail/' + item.id }"
              v-for="(item, index) in likeInfo"
              :key="index"
            >
              <div class="product acea-row">
                <div class="image">
                  <img :src="item.image" />
                </div>
                <div class="font">
                  <div class="line">{{ item.store_name }}</div>
                  <div class="price">
                    ￥<span class="num">{{ item.price }}</span>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row class="footer" type="flex" justify="center">
      <el-col :span="18" style="height:130px;">
        <div class="text">
          <p class="line1">
            关于我们|帮助中心 | 售后服务 | 配送与验收 | 商务合作 | 企业采购 |
            开放平台 |搜索推荐 |友情链接 | 廉正举报
          </p>
          <p class="line2">
            食品经营许可证：JY13301080111719出版物经营许可证：新出发滨字第0132号妙得ICP证号：ICP
            证浙B2-20160106
          </p>
          <p class="line2">
            无线电发射设备销售备案：42201919712647（浙杭）网械企备字[2019]第00119号（粤）网械平台备字（2019）第00004号单用途商业预付卡备案证：330100AAC0024
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
import GoodList from "@components/GoodList";
import PromotionGood from "@components/PromotionGood";
import CouponWindow from "@components/CouponWindow";
import { getHomeData, getShare, follow } from "@api/public";
import cookie from "@utils/store/cookie";
import { openShareAll } from "@libs/wechat";
import { isWeixin } from "@utils/index";
const HAS_COUPON_WINDOW = "has_coupon_window";

export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide,
    GoodList,
    PromotionGood,
    CouponWindow
  },
  props: {},
  data: function() {
    return {
      followUrl: "",
      subscribe: false,
      followHid: true,
      followCode: false,
      showCoupon: false,
      logoUrl: "",
      banner: [],
      menus: [],
      roll: [],
      activity: [],
      activityOne: {},
      info: {
        fastList: [],
        bastBanner: [],
        firstList: [],
        bastList: []
      },
      likeInfo: [],
      lovely: [],
      benefit: [],
      couponList: [],
      swiperOption: {
        pagination: {
          el: ".paginationBanner",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperRoll: {
        direction: "vertical",
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperScroll: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      swiperBoutique: {
        pagination: {
          el: ".paginationBoutique",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      swiperProducts: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {
    let that = this;
    getHomeData().then(res => {
      that.logoUrl = res.data.logoUrl;
      that.$set(that, "banner", res.data.banner);
      that.$set(that, "menus", res.data.menus);
      that.$set(that, "roll", res.data.roll);
      that.$set(that, "activity", res.data.activity);
      if (res.data.activity.length) {
        var activityOne = res.data.activity.shift();
        that.$set(that, "activityOne", activityOne);
      }
      that.$set(that, "info", res.data.info);
      that.$set(that, "likeInfo", res.data.likeInfo);
      that.$set(
        that,
        "lovely",
        res.data.lovely.length ? res.data.lovely[0] : {}
      );
      that.$set(that, "benefit", res.data.benefit);
      that.$set(that, "couponList", res.data.couponList);
      that.subscribe = res.data.subscribe;
      that.setOpenShare();
      this.showCoupon =
        !cookie.has(HAS_COUPON_WINDOW) &&
        res.data.couponList.some(coupon => coupon.is_use);
    });
    // this.getFollow();
  },
  methods: {
    closeFollow() {
      this.followHid = false;
    },
    followTap() {
      this.followCode = true;
      this.followHid = false;
    },
    submit() {
      this.followCode = true;
      this.followHid = false;
    },
    closeFollowCode() {
      this.followCode = false;
      this.followHid = true;
    },
    couponClose() {
      cookie.set(HAS_COUPON_WINDOW, 1);
    },
    getFollow() {
      follow()
        .then(res => {
          this.followUrl = res.data.path;
        })
        .catch(() => {});
    },
    setOpenShare() {
      if (isWeixin()) {
        getShare().then(res => {
          var data = res.data.data;
          var configAppMessage = {
            desc: data.synopsis,
            title: data.title,
            link: location.href,
            imgUrl: data.img
          };
          openShareAll(configAppMessage);
        });
      }
    }
  }
};
</script>
<style scoped>
.classify {
  margin: 0 auto;
  width: 1090px;
  height: 25px;
}

.classify ul {
  height: 25px;
  position: relative;
}

.classify ul li {
  display: inline-block;
}
.classify ul li span {
  font-size: 14px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  line-height: 25px;
  font-weight: 700;
  margin: 0 26px;
  padding-bottom: 3px;
}

.classify ul li .title {
  height: 25px;
}
.classify ul li span:hover {
  border-bottom: 4px solid #cc9756;
  color: #cc9756;
}

.classify ul li .item {
  padding: 0 26px;
  padding-bottom: 7px;
}
.show-warp {
  display: none;
  position: absolute;
  left: 0px;
  top: 35px;
  width: 1090px;
  height: 180px;
  background-color: #d4282d;
  z-index: 99999999;
}
.classify .item:hover .show-warp {
  display: block;
}

.index {
  background-color: #fff;
}
.index .follow {
  z-index: 100000;
}
.frontName {
  padding-top: 13px;
  display: inline-block;
  line-height: 1;
  font-size: 14px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  color: #333;
}
.promotionalItemsProductTitleFrontName {
  padding-top: 23px;
  display: inline-block;
  line-height: 1;
  font-size: 14px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  color: #333;
}

.moreItems {
  display: inline-block;
  position: absolute;
  right: 0;
  line-height: 1;
  margin-left: 30px;
  padding-top: 14px;
  cursor: pointer;
  padding-left: 20%;
}
.menu {
  height: 300px;
  width: 58%;
  margin: -45px 20%;
}
.newArruval {
  background-color: #f4f0ea;
}
.name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  float: left;
  margin-right: 20px;
}
.newArruvalHead {
  width: 1090px;
  margin: 0 auto;
}
.newArruvalHead,
.boutiqueRecommendationHead {
  width: 1090px;
  position: relative;
  margin: 0 auto;
}

.newArruvalBox {
  height: 464px;
}
.newArruvalCard {
  width: 265px;
  height: 365px;
  padding: 0 5px;
  margin: 0 3px;
}
.newArruvalFont {
  height: 37px;
  line-height: 37px;
  color: #333;
  text-align: center;
  font-size: 13px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  font-weight: bold;
  margin: 20px auto 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.newArruvalPrice {
  line-height: 13px;
  height: 13px;
  padding: 0;
  color: #d4282d;
  font-size: 13px;
  text-align: center;
  padding: 5px 0 20px;
}

.boutiqueRecommendationTitle {
  height: 45px;
  padding: 50px 0;
}
.promotionalItemsTitle {
  height: 45px;
  padding: 50px 0;
  background-color: #f4f0ea;
}
.promotionalItemsBox {
  width: 1090px;
  height: 376px;
  margin: 0 auto;
}
.promotionalItemsSwiper {
  width: 224px;
  height: 376px;
}
.promotionalItemsProduct {
  height: 376px;
  width: 624px;
}
.promotionalItemsProductList {
  width: 608px;
  height: 300px;
  margin: 20px auto 0;
}
.promotionalItemsProductItems {
  width: 284px;
  height: 130px;
  margin: 0px 20px 20px 0px;
}
.promotionalItemsProductItems .image {
  width: 130px;
  height: 130px;
}
.promotionalItemsProductItems .image img {
  width: 100%;
}
.promotionalItemsProductItems .font {
  margin-left: 10px;
}

.promotionalItemsProductItems .font .promotion {
  font-size: 14px;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  color: #d4282d;
}
.promotionalItemsProductItems .font .dailyPrice {
  margin-top: 2px;
  font-size: 14px;
  color: #a4a4a4;
  line-height: 1.1;
  text-decoration: line-through;
}
.promotionalItemsProductItems .font .btn {
  margin-top: 10px;
  bottom: 8px;
  width: 90px;
  line-height: 26px;
  text-align: center;
  background-color: #be4141;
  border: 1px solid #d25a5a;
  border-radius: 2px;
  color: #fff;
}
.promotionalItemsProductTitle {
  width: 588px;
  height: 56px;
  margin: 0 auto;
  border-bottom: 1px solid #f4f0ea;
  position: relative;
}
.promotionalItemsHot {
  width: 242px;
  height: 376px;
  border-left: 1px solid #f4f0ea;
}
.promotionalItemsHot .title {
  width: 188px;
  height: 56px;
  margin: 0 auto;
  border-bottom: 1px solid #f4f0ea;
  position: relative;
}
.promotionalItemsHot .product {
  width: 200px;
  height: 100px;
  margin: 5px auto 0;
}
.promotionalItemsHot .product .image {
  width: 100px;
  height: 100px;
}
.promotionalItemsHot .product .image img {
  width: 100%;
}
.promotionalItemsHot .product .font {
  width: 100px;
  height: 100px;
}
.promotionalItemsHot .product .font .line {
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  line-height: 1.1;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 12x;
  -webkit-line-clamp: 2;
}

.promotionalItemsHot .product .font .price {
  padding-left: 10px;
  color: #d4282d;
}
.fontTitle {
  max-width: 130px;
  max-height: 40px;
  overflow: hidden;
  margin-top: 15px;
  font-size: 14px;
  line-height: 20px;
}
.promotionalItemsProductTitleName {
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  color: #333;
  font-size: 16px;
  line-height: 1;
  float: left;
  margin-right: 20px;
  padding-top: 20px;
}
.boutiqueRecommendationSwiper {
}
.footer {
  background-color: #414141;
}
.footer .text {
  width: 1090px;
  height: 100px;
  margin: 15px auto;
}
.footer .text .line1 {
  margin-top: 30px;
  text-align: center;
  line-height: 1.5;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  color: #999;
}
.footer .text .line2 {
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
  font-family: "Microsoft Yahei", "微软雅黑", verdana;
  color: #999;
}
</style>
